import React, { Component } from 'react';
import DomHelper from '../domHelper';
import LoaderHelper from './loaderHelper';
import tool from '../../../../../../utils/tool';

class ExtendGeometryLoader extends Component {
    constructor(props) {
        super(props);
        this.updateExtend = this.updateExtend.bind(this);
    }
    
    componentDidMount() {
        const { widget, isUpdate } = this.props;
        this.createExtendGeometry(widget, isUpdate);
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.widget !== this.props.widget) {
            LoaderHelper.resetMeshItem(nextProps.widget, this.updateExtend)
        }
    }

    updateExtend(data) {
        this.createExtendGeometry(data, true);
    }

    createExtendGeometry(data, isUpdate) {
        let circleTypes = ["music"],
            type = data.stereoType;
        let params = {
            side: THREE.DoubleSide,
            transparent: true,
            opacity: data.opacity
        };

        let src = data.icon_src || data.url;
        // 加载自定义图片
        if (data.custom && src) {
            data.url = src;
            LoaderHelper.imageGeometryLoader(null, data, isUpdate);
        } else {
            LoaderHelper.specifyImageLoader(data, function() {
                let width = data.width,
                    height = data.height;

                let imgFn = data.icon ? function(canvas) {
                    let ctx = canvas.getContext("2d");
                    ctx.drawImage(this, data.imgPosX, data.imgPosY, data.imgWidth, data.imgHeight);
                }.bind(this) : null;

                let textFn = data.stereoText ? function(canvas) {
                    let ctx = canvas.getContext("2d");
                    ctx.fillStyle = data.stereoColor || data.textColor || "#ffffff";
                    ctx.font = data.textSize + "px Arial";
                    ctx.fillText(data.stereoText, data.textPosX, data.textPosY);
                } : null;

                let gradColor = tool.converionColor(data.color);
                let canvas = LoaderHelper.canvasCreator({
                    data: data,
                    imgFn: imgFn,
                    textFn: textFn,
                    gradientParam: gradColor
                });

                let texture = new THREE.CanvasTexture(canvas);
                params["map"] = texture;

                if (isUpdate) {
                    let material = new THREE.MeshBasicMaterial(params);
                    DomHelper.selectedItem.material = material;
                } else {
                    let geometry = $.inArray(type, circleTypes) != -1 ?
                        new THREE.CircleGeometry(Math.floor(Math.max(width, height) / 2), 50) :
                        new THREE.PlaneGeometry(width, height);
                    let material = new THREE.MeshBasicMaterial(params);
                    let mesh = LoaderHelper.meshCreator(null, THREE.PlaneGeometry, {}, data, geometry, material);
                    DomHelper.scene.add(mesh);
                }
            });
        }
    }

    render() {
        return (<div />)
    }
}

export default ExtendGeometryLoader;
